<template>
  <div class="container">
    <!-- 搜索栏 -->
    <SearchBox :data="searchData" @search="handleSearch" @reset="handleReset" />
    <!-- 列表 -->
    <TableBox :loading="loading" :list="list" :page="paginationData" />
    <!-- 分页 -->
    <pagination
      v-show="paginationData.total > 0"
      :total="paginationData.total"
      :page.sync="paginationData.page"
      :limit.sync="paginationData.size"
      @pagination="handlePaginationChange"
    />
  </div>
</template>
  
  <script>
import SearchBox from "./components/SearchBox.vue";
import TableBox from "./components/TableBox.vue";
import { listOrder } from "@/api/order";

export default {
  components: {
    SearchBox,
    TableBox,
  },
  data() {
    return {
      list: [],
      loading: false,
      searchData: {
        uuid: null,
        feedPhone: null,
        feedStatuses: '1,2',
      },
      paginationData: {
        total: 0,
        page: 1,
        size: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索
    handleSearch() {
      this.paginationData.page = 1;
      this.getList();
    },
    // 重置
    handleReset() {
      this.searchData = {
        uuid: null,
        feedPhone: null,
        feedStatuses: '1,2',
      };
      this.paginationData.page = 1;
      this.getList();
    },
    // 获取列表数据
    async getList() {
      const { page, size } = this.paginationData;
      const params = {
        ...this.searchData,
        pageNum: page,
        pageSize: size,
      };
      this.loading = true;
      listOrder(params).then((response) => {
        this.list = response.rows;
        this.paginationData.total = response.total;
        this.loading = false;
      });
    },
    // 分页
    handlePaginationChange(val) {
      this.paginationData.page = val.page;
      this.paginationData.size = val.limit;
      this.getList();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.container {
  padding: 20px;
    width: 800px;
}
</style> 